@types: primary, secondary, tertiary, success, error, danger, warning;

.cm-button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 12px;
    height: var(--height-control-default);
    line-height: var(--height-control-default);
    -webkit-user-select: none;
    user-select: none;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    outline: none;
    color: var(--cui-color-text-1);
    border-radius: var(--cui-border-radius-small);
    background-image: none;
    border: none;
    border-image: none;
    backface-visibility: hidden;
    background-color: var(--cui-color-fill-0);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);

    .cm-loading {
        margin-right: 5px;
    }

    &.cm-button-empty {
        .cm-loading {
            margin-right: 0;
        }
    }

    .cm-button-icon {
        display: flex;
    }

    &.cm-button-icon-left {
        .cm-button-icon {
            margin-right: 5px;
        }
    }

    &.cm-button-icon-right {
        .cm-button-icon {
            margin-left: 5px;
        }
    }

    &.cm-button-empty,
    &.cm-button-icon-only {
        width: var(--height-control-default);
        height: var(--height-control-default);
        padding: 0;
        font-size: 16px;
        justify-content: center;

        .cm-button-icon {
            margin: 0;
        }
    }

    &.cm-button-large {
        height: var(--height-control-large);
        line-height: calc(var(--height-control-large) - 1px);
        padding: 0 15px;
        font-size: 16px;

        &.cm-button-icon-only {
            width: var(--height-control-large);
            height: var(--height-control-large);
            padding: 0;
            font-size: 17px;
        }
    }

    &.cm-button-small {
        height: var(--height-control-small);
        line-height: var(--height-control-small);
        border-radius: calc(var(--cui-border-radius-small) - 1px);
        padding: 0 7px;
        font-size: 12px;

        &.cm-button-empty,
        &.cm-button-icon-only {
            width: var(--height-control-small);
            height: var(--height-control-small);
            padding: 0;
            font-size: 14px;
        }
    }

    &.cm-button-circle {
        border-radius: var(--height-control-small);

        &::after {
            border-radius: var(--height-control-small);
        }
    }

    &.cm-button-round {
        border-radius: var(--height-control-small);

        &::after {
            border-radius: var(--height-control-small);
        }
    }

    &:focus,
    &:hover {
        color: var(--cui-color-text-1);
        background-color: var(--cui-color-fill-1);
    }

    &:active {
        color: var(--cui-color-text-0);
        background-color: var(--cui-color-fill-2);
    }

    each(@types, {
            &.cm-button-@{value} {
                color: var(~"--cui-color-@{value}");

                &.cm-button-theme-solid {
                    color: #fff;
                    background-color: var(~"--cui-color-@{value}");

                    &::after {
                        border-color: var(~"--cui-color-@{value}");
                    }

                    &:focus,
                    &:hover {
                        background-color: var(~"--cui-color-@{value}-hover");
                    }

                    &:active {
                        background-color: var(~"--cui-color-@{value}-active");
                    }
                }
            }
        }

    );

    &.cm-button-theme-light {

        &:focus,
        &:hover {
            background-color: var(--cui-color-fill-1);
        }

        &:active {
            background-color: var(--cui-color-fill-2);
        }
    }

    &.cm-button-theme-borderless {
        background-color: transparent;

        &::before {
            content: none;
        }

        &:focus,
        &:hover {
            background-color: var(--cui-color-fill-0);
        }

        &:active {
            background-color: var(--cui-color-fill-1);
        }
    }

    &.cm-button-theme-dashed,
    &.cm-button-theme-outline {
        background-color: transparent;

        &:focus,
        &:hover {
            background-color: var(--cui-color-fill-0);
        }

        &:active {
            background-color: var(--cui-color-fill-1);
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-color: transparent;
            border: 1px solid transparent;
            border-color: var(--cui-color-border);
            border-radius: var(--cui-border-radius-small);
            transition: all .3s cubic-bezier(.645, .045, .355, 1);
        }

        each(@types, {
            &.cm-button-@{value} {
                &::after {
                    border-color: var(~"--cui-color-@{value}");
                }
            }
        });
    }

    &.cm-button-theme-dashed {
        &::after {
            border-style: dashed;
        }
    }


    &.cm-button-block {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    &[disabled] {
        color: var(--cui-color-disabled-text) !important;
        cursor: not-allowed;

        &.cm-button-theme-light {
            background: var(--cui-color-disabled-bg) !important;
        }

        &.cm-button-theme-solid {
            background: lch(from var(--cui-color-disabled-bg) calc(l~"-"5) c h) !important;
        }

        &.cm-button-theme-dashed,
        &.cm-button-theme-outline {
            &::after {
                border-color: var(--cui-color-disabled-border) !important;
            }
        }

        &.cm-button-theme-outline,
        &.cm-button-theme-dashed,
        &.cm-button-theme-borderless {
            &:hover {
                background-color: transparent !important;
            }
        }

        >* {
            pointer-events: none;
        }
    }
}

.cm-click-animating::before {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    box-shadow: 0 0 0 0 var(--cui-color-primary);
    box-shadow: 0 0 0 0 var(--cui-color-primary);
    opacity: .2;
    -webkit-animation: fadeEffect 2s cubic-bezier(.08, .82, .17, 1),
        waveEffect .4s cubic-bezier(.08, .82, .17, 1);
    animation: fadeEffect 2s cubic-bezier(.08, .82, .17, 1),
        waveEffect .4s cubic-bezier(.08, .82, .17, 1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    content: "";
    pointer-events: none;
}

@-webkit-keyframes waveEffect {
    to {
        box-shadow: 0 0 0 var(--cui-color-primary);
        box-shadow: 0 0 0 6px var(--cui-color-primary)
    }
}

@keyframes waveEffect {
    to {
        box-shadow: 0 0 0 var(--cui-color-primary);
        box-shadow: 0 0 0 6px var(--cui-color-primary);
    }
}

@-webkit-keyframes fadeEffect {
    to {
        opacity: 0
    }
}

@keyframes fadeEffect {
    to {
        opacity: 0
    }
}

.cm-button-loading {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    margin-top: -2px;
}

.cm-button.cm-button-small .cm-button-loading {
    margin-top: -4px;
}

.cm-button-group {
    display: inline-flex;
    gap: 0;

    .cm-button {
        margin: 0;
        outline: 1px solid transparent;

        &:not(.cm-button-theme-outline):not(.cm-button-theme-dashed) {
            &::after {
                z-index: 1;
                content: '';
                position: absolute;
                inset: 0;
                height: 50%;
                top: 25%;
                right: -1px;
                border-right: 1px solid var(--cui-color-border);
            }

            &:last-child {
                &::after {
                    content: none;
                }
            }
        }

        // &:first-child,
        // &:first-child::after {
        //     border-top-left-radius: var(--cui-border-radius-small);
        //     border-bottom-left-radius: var(--cui-border-radius-small);
        // }
        &:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &.cm-button-theme-dashed,
        &.cm-button-theme-outline {
            &:not(:last-child) {
                &::after {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
            }

            &:not(:first-child) {
                &::after {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                    border-left: 0;
                }
            }
        }

        &::before {
            z-index: 1;
        }
    }
}